<style lang="scss">
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
	color: white !important;
}
.addField{
	position: relative;
}
.addField:before {
	content: '';
	position: absolute;
	top: -10px; /* 向上扩展10px */
	right: -10px; /* 向右扩展10px */
	bottom: -10px; /* 向下扩展10px */
	left: -10px; /* 向左扩展10px */
}
</style>
<template>
	<div class="flex flex-row justify-between align-center">
		<div class="flex flex-row align-center">
			<!-- <div class="addField" @click.prevent="collapseChange">
				<el-icon><Operation /></el-icon>
			</div> -->
			<el-icon class="addField" @click.prevent="collapseChange"><Operation /></el-icon>
			<el-breadcrumb class="mar-l-20 noSelect" separator="/" v-if="breadCrumb && breadCrumb.length">
				<el-breadcrumb-item v-for="item in breadCrumb" :key="item.path" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- <div>
			<el-icon :size="24" :color="'#fff'">
				<Edit />
			</el-icon>
		</div> -->
		<div class="flex flex-row align-center">
			<el-color-picker v-model="mainColor" @change="changeMianColor"/>
			<span class="mar-l-10">{{ store.userInfo.name }}</span>
			<el-avatar class="mar-l-10" :size="30" :src="store.userInfo.avatar" fit="cover"/>
		</div>
	</div>
</template>

<script setup>
	import bus from '@/utils/mitt'
	import { mainStore } from '@/store/index.js'
	// import { setMainColor } from '@/store/localStorage.js'
	import { reactive, ref, toRaw } from 'vue'
	// let a = [{name: 'test'}]
	// console.log('a', a)
	const store = mainStore()
	// 自定义颜色
	let mainColor = ref(store.getters_mainColor)
	let changeMianColor = (e) => {
		console.log('e', e)
		store.setMainColor(e)
		bus.emit('changeMainColor', e)
	}
	// 面包屑导航与菜单之间的联动
	let breadCrumb = ref([])
	// 菜单
	import { menuStore } from '@/store/menuStore.js'
	const useMenuStore = menuStore()
	let menus = []
	// 1.获得当前被点击的菜单选项
	bus.off('activeMenu')
	bus.on('activeMenu', (path) => {
		breadCrumb.value = []
		console.log('path', path)
		// 2.根据菜单来渲染面包屑导航
		menus = useMenuStore.menus
		breadCrumb.value = getBreadCrumbByPath(menus, path)
		console.log('breadCrumb', breadCrumb)
	})
	// 伸缩菜单
	function collapseChange() {
		let cValue = !useMenuStore.collapse
		bus.emit('collapseChange', cValue)
		useMenuStore.collapse = cValue
	}
	/**
	 * 根据路径获取面包屑导航数组
	 * @param menus 
	 * @param path 
	 */
	function getBreadCrumbByPath(menus, path) {
		let breadCrumbArr = []
		for(const item of menus) {
			let isBreak = false
			breadCrumbArr = []
			breadCrumbArr.push(item)
			if (item.child) {
				for(const element of item.child) {
					if (element.path == path) {
						breadCrumbArr.push(element)
						isBreak = true
						break
					}
				}
			} else {
				if (item.path == path) {
					isBreak = true
				}
			}
			if (isBreak) {
				break
			}
		}
		console.log('breaCdrumbArr=>', breadCrumbArr)
		return breadCrumbArr
	}
</script>